<template>
  <view class="root">
    <view class="top-wrapper">
      <view class="content-inner">
        <image class="pass-img" :src="baseImgUrl +'no-pass-icon.png'"></image>
        <view class="no-pass-text">
          本次检查不合格
        </view>
        <view class="red-title">
          不合格事项
        </view>
        <view class="no-pass-box" v-for="(item, i) in unqualifiedList" :key="i">
          <view class="l-title">
            {{`【${item.examineCategoryName}】`}}
          </view>
          <view class="" v-for="(innerItem, index) in item.unqualifieds" :key="index">
            <view class="s-title">
              {{`${innerItem.sortOrder}.${innerItem.industryExamineDetailName}`}}
            </view>
            <view class="law-box" v-for="(lawItem , lawIndex) in innerItem.regulationsVos" :key="lawIndex">
              <view class="law-name">
                {{`《${lawItem.regulationsName}》`}}
              </view>
              <view class="law-text" v-html="lawItem.regulationsArticleNo + ' '+ lawItem.regulationsArticleContent">
              </view>
            </view>
            <view class="law-reason">
              <view class="law-l">
                现场证据
              </view>
              <view class="law-r" v-if="radiovalue[innerItem.outerIndex][innerItem.innerIndex].value === 0 && (
                !_get(evidenceList, `[${innerItem.outerIndex}][${innerItem.innerIndex}].value`, undefined) &&
                !_get(evidenceList, `[${innerItem.outerIndex}][${innerItem.innerIndex}].imgUrl`, []).length
                )" @click="handleImprove(innerItem.outerIndex, innerItem.innerIndex)">
                去完善>
              </view>
              <view class="law-r" v-if="
                 _get(evidenceList, `[${innerItem.outerIndex}][${innerItem.innerIndex}].value`, undefined) ||
                 _get(evidenceList, `[${innerItem.outerIndex}][${innerItem.innerIndex}].imgUrl`, []).length
                 " @click="handleEditImprove(innerItem.outerIndex, innerItem.innerIndex)">
                已完善，去编辑>
              </view>
            </view>
            <u-line margin="0 0 20rpx 0"></u-line>
          </view>
        </view>
        <view class="red-title">
          处理结果 <view class="sub-text">
            （限期整改与停业整顿只可选其一）
          </view>
        </view>
        <view class="process-result">
          <u-radio-group v-model="form.rectificationType" placement="row">
            <u-radio :customStyle="{marginBottom: '40rpx', marginTop: '40rpx'}" v-for="(item, index) in radiolist"
              :key="index" :label="item.label" :name="item.name">
            </u-radio>
          </u-radio-group>
        </view>
        <view class="red-title">
          企业回执截止日期
        </view>
        <view class="receipt-time">
          <uni-datetime-picker v-model="form.penaltyEndTime" type="date" :start="getNextDayStartDate()">
            <view class="select-date-dom">
              <image :src="baseImgUrl + 'date-select.png'" class="s-icon"></image>
              {{form.penaltyEndTime ? form.penaltyEndTime: '请选择'}}
            </view>
            <view class="select-date">
              选择日期>
            </view>
          </uni-datetime-picker>
        </view>
      </view>
    </view>
    <view class="bottom-wrapper">
      <u-button class="custom-style" text="生成责令整改通知书" @click="handleCheckDone"
        :custom-style="customSubmitStyleFull"></u-button>
    </view>
  </view>
</template>

<script>
  import moment from '../utils/moment'
  import {
    customSubmitStyleFull,
    navTo,
    getEndOfTodayTimestamp,
    getNextDayStartDate,
    getOptionsParams,
    Toast,
    getDateAfterNDays
  } from '@/utils/util.js'
  import {
    mapState
  } from 'vuex'
  import _ from '@/utils/lodash.js'

  const _get = _.get
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        customSubmitStyleFull,
        radiolist: [{
            label: '限期整改',
            name: 1,
          },
          {
            label: '停业整顿',
            name: 2,
          }
        ],
        form: this.initForm(),
        routerParams: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)

      // 判断是不是复查
      if (this.routerParams.action === 'recheck') {
        uni.setNavigationBarTitle({
          title: '复查结果'
        })
      }
    },
    computed: {
      ...mapState(['radiovalue', 'evidenceList', 'examineIdItems']),
      // 过滤出不合格项的数组
      unqualifiedList() {
        let result = []
        this.radiovalue.forEach((outerItem, i) => {
          // 找出不合格的
          let outerObj = {
            examineCategoryName: this.examineIdItems[i].examineCategoryName,
            unqualifieds: []
          }

          outerItem.forEach((item, index) => {
            // 
            if (item.value === 0) {
              let innerObj = {
                // 
                // 证据索引
                outerIndex: i,
                innerIndex: index,
                // 检查项内容
                ...this.examineIdItems[i]['inspectionItemsSonVos'][index]
                // 
              }
              outerObj.unqualifieds.push(innerObj)
            }
          })
          if (outerObj.unqualifieds.length) {
            result.push(outerObj)
          }
        })
        return result
      }
    },
    methods: {
      _get,
      getEndOfTodayTimestamp,
      getNextDayStartDate,
      initForm() {
        return {
          rectificationType: '',
          penaltyEndTime: moment(getDateAfterNDays(14)).format('YYYY-MM-DD')
        }
      },
      handleCheckDone() {
        if (!this.form.rectificationType) {
          Toast('请选择处理结果！')
          return
        }
        if (!this.form.penaltyEndTime) {
          Toast('请选择执截止日期！')
          return
        }
        let params = {
          ...this.routerParams,
          ...this.form,
        }
        // 如果是复检
        // action: 'recheck',
        if (this.routerParams.action === 'recheck') {
          params = {
            ...this.routerParams,
            ...this.form,
            paramsInfo: {
              id: this.routerParams.id,
              companyId: this.routerParams.companyId,
              checkId: this.routerParams.checkId,
              industryExamineName: this.routerParams.industryExamineName,
              rectificationType: this.form.rectificationType,
              penaltyEndTime: this.form.penaltyEndTime,
              detailId: this.routerParams.detailId,
              descriptionOfViolation: this.routerParams.descriptionOfViolation,
            }
          }
        }
        navTo({
          url: '/venueInspection/generateTextBooks',
          params: params
        })
      },
      handleSign() {
        navTo({
          url: '/venueInspection/sign'
        })
      },
      handleImprove(outerIndex, innerIndex) {
        navTo({
          url: '/venueInspection/improveEvidence',
          params: {
            outerIndex,
            innerIndex
          }
        })
      },
      handleEditImprove(outerIndex, innerIndex) {
        navTo({
          url: '/venueInspection/improveEvidence',
          params: {
            outerIndex,
            innerIndex,
            improveContent: this.$store.state.evidenceList[outerIndex][innerIndex]
          }
        })
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
  }
</style>

<style lang="scss" scoped>
  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;
    padding: 0 24rpx;



    .top-wrapper {
      flex: 1;
      overflow: auto;
      margin: 10rpx 0;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 30rpx;
        padding-bottom: 61rpx;

        .pass-img {
          width: 91rpx;
          height: 91rpx;
          margin-top: 32rpx;
        }

        .no-pass-text {
          font-weight: 500;
          font-size: 36rpx;
          color: #EB0101;
          margin-top: 21rpx;
          margin-bottom: 44rpx;
        }

        .red-title {
          height: 72rpx;
          background: #FEECF0;
          width: 100%;
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 32rpx;
          color: #EB0101;
          border-left: 6px solid #EB0101;
          padding-left: 34rpx;

          .sub-text {
            font-weight: 500;
            font-size: 26rpx;
            color: #EB0101;
          }
        }

        .process-result {
          width: 100%;

          /deep/ .u-radio-group--row {
            .u-radio:nth-child(1) {
              margin-right: 56rpx;
            }
          }
        }

        .receipt-time {
          display: flex;
          width: 100%;
          margin-top: 35rpx;
          position: relative;

          .select-date-dom {
            height: 80rpx;
            background: #F9F9F9;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 1rpx solid #EEEEEE;
            display: flex;
            font-size: 28rpx;
            align-items: center;

            .s-icon {
              width: 35rpx;
              height: 35rpx;
              margin-left: 26rpx;
              margin-right: 11rpx;
            }
          }

          .select-date {
            position: absolute;
            font-size: 28rpx;
            right: 10rpx;
            top: 50%;
            transform: translateY(-50%);
            color: #2488F5;
          }
        }

        .no-pass-box {
          width: 100%;

          .l-title {
            font-weight: 400;
            font-size: 26rpx;
            color: #747070;
            margin-top: 29rpx;
            margin-bottom: 26rpx;
          }

          .s-title {
            font-weight: bold;
            font-size: 30rpx;
            color: #212020;
            margin-bottom: 26rpx;
          }

          .law-box {
            .law-name {
              font-weight: 500;
              font-size: 26rpx;
              color: #536598;
              margin-bottom: 23rpx;
              padding-left: 13rpx;
            }

            .law-text {
              font-weight: 500;
              font-size: 26rpx;
              color: #666666;
              line-height: 44rpx;
              margin-bottom: 26rpx;
              position: relative;
              padding-left: 20rpx;

              &:before {
                content: '';
                position: absolute;
                left: 0;
                width: 10rpx;
                height: 10rpx;
                background: #BBBBBB;
                top: 17rpx;
                border-radius: 50%;
              }
            }
          }

          .law-reason {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10rpx;

            .law-l {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            .law-r {
              font-weight: 500;
              font-size: 28rpx;
              color: #2488F5;
            }
          }
        }
      }
    }

    .bottom-wrapper {
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>